<template>
    <div class="header" v-bind:style="{height:height}">
        <el-menu
            :router="false"
            class="el-menu-top-bar"
            mode="horizontal"
            text-color="#fff"
            @select="handleSelect"
            active-text-color="#ffd04b"
        >
            <div style="float:left;width:180px;text-align: center;margin-left:20px" v-bind:style="{height:height}">
                <router-link to="/">
                    <!-- <img
                        :style="{width:height, height:height, float: 'left'}"
                        src="../assets/default_avatar.png"
                    > -->
                    <span class="flex-center" :style="{height:height, float:'left', color:'white', 'margin-left':'20px'}">统一用户管理平台</span>
                </router-link>
            </div>
            <!-- <template v-if="menuData != null && menuData.children != null">
                <el-menu-item
                    :index="item.id.toString()"
                    v-for="item in menuData.children"
                    :model="item"
                    :key="item.id"
                >
                    <i :class="item.icon"></i>
                    {{item.name}}
                </el-menu-item>
            </template> -->
            <div class="top-menu-user">
                <el-dropdown v-if="userInfo && userInfo.id && $route.path != '/login'" @command="handleCommand">
                    <a href="javascript:;" class="el-dropdown-link top-menu-user-a">
                        {{userInfo.name}}
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </a>
                    <el-dropdown-menu slot="dropdown" class="top-menu-user-dropdown">
                        <el-dropdown-item command="onModifyPassword"><i class="iconfont icon-lock"></i>修改密码</el-dropdown-item>
                        <el-dropdown-item command="logout"><i class="iconfont icon-logout"></i>退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <a v-else href="javascript:;" class="top-menu-user-a" @click="onRegister">注册</a>
            </div>
        </el-menu>
        <modify-password
            :show="showModifyPassword"
            :cancel="handleModifyPasswordCancel"
            :success="handleModifyPasswordSuccess"
        ></modify-password>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import ModifyPassword from '../page/ModifyPassword.vue'

export default {
    props: {
        height: String
    },
    components: {
        ModifyPassword
    },
    data() {
        return {
            showModifyPassword: false,
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.auth.userInfo
        }),
    },
    methods: {
        logout() {
            this.$store.dispatch('auth/logout')
            // localStorage.removeItem('authorization')
            this.$router.push('/')
        },
        handleSelect(key, keyPath) {
            this.$store.dispatch('menu/setActiveIndex', key.toString())
        },
        onModifyPassword() {
            this.showModifyPassword = true
            // this.$message.info('todo')
        },
        handleModifyPasswordCancel() {
            this.showModifyPassword = false
        },
        handleModifyPasswordSuccess() {
            this.showModifyPassword = false
        },
        handleCommand(command) {
            switch (command) {
                case 'onModifyPassword':
                    this.onModifyPassword()
                    break
                case 'logout':
                    this.logout()
                    break
                default:
                    break
            }
        },
        onRegister() {
            this.$message.info("请联系管理员注册")
        }
    },
}
</script>

<style scoped>
.header {
    height: 100px;
    width: 100%;
    background: black;
}
a {
    text-decoration: none;
}
.el-menu-top-bar {
    /* padding-left: 200px; */
    text-align: left;
}
.top-menu-user {
    float: right;
    width: 150px;
    font-size: 14px;
}
.top-menu-user-a {
    display: inline-block;
    color: white;
    line-height: 50px;
    margin: 0;
    text-align: center;
    /* width: 100%; */
    width: 150px;
}
.el-menu--horizontal > .el-menu-item {
    height: 50px;
    line-height: 50px;
}
.el-dropdown-menu {
    width: 140px;
}
@import "../assets/theme1/header.css";
</style>